<template>
  <div>
    <!-- 三级分类 -->
    <Category :scene="scene" type="spu"></Category>
    <el-card style="margin: 10px 10px">
      <el-button :disabled="!(useCategory.sputotal > 0)" type="primary" size="default" icon="Plus" @click="addspu">添加SPU</el-button>
      <el-table border style="margin: 10px 10px" :data="useCategory.spuList">
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="80px"
        ></el-table-column>
        <el-table-column label="SPU名称">
          <template #="{row}">
            {{row.spuName}}
          </template>
        </el-table-column>
        <el-table-column label="SPU描述">
          <template #="{row}">
            {{row.description}}
          </template>
        </el-table-column>
        <el-table-column label="SPU操作">
          <template>
            <el-button icon="plus" type="primary" size="small"></el-button>
            <el-button icon="View" type="success" size="small"></el-button>
            <el-button icon="Edit" type="warning" size="small"></el-button>
            <el-button icon="Delete" type="danger" size="small"></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 分页器 -->
    <el-pagination
      v-model:current-page="pageNo"
      v-model:page-size="pageSize"
      :page-sizes="[3, 5, 7, 9]"
      :background="true"
      layout=" prev, pager, next, jumper,->, sizes,total"
      :total="useCategory.sputotal"
      @current-change="changepageNo"
      @size-change="changesize"
    />
  </div>
</template>

<script setup lang="ts">
import {ref,onBeforeUnmount, onMounted} from 'vue'
import {reqHasSpu} from "@/api/product/spu";
import {useCategorystore} from "@/stores/CategoryStore.ts";
const useCategory = useCategorystore()
//场景的数据
let scene = ref<number>(0)
//分页器默认页码
let pageNo = ref<number>(1)
//每一页展示几条数据
let pageSize = ref<number>(3)
onMounted(async () => {
  await useCategory.reqCategory1()
})
const reqpage = async () => {
  const p = await reqHasSpu(
      pageNo.value,
      pageSize.value,
      useCategory.ID3
  )
  useCategory.setspuList(p.data.records)
}
const changepageNo = () => {
  reqpage()
}
const changesize = ()=>{
  pageNo.value = 1
  reqpage()
}
const addspu = ()=>{

}
onBeforeUnmount(()=>{
  useCategory.resetState()
})
</script>

<style lang="scss" scoped></style>
